<template>
	<view style="height: 100%; overflow-y: scroll;">
		<view v-if="cartList.length == 0">
			<image class="icon-layout" src="/static/weapp/ic_cart3.png"></image>
			<view class="empty-content">购物车空空如也</view>
		</view>
		<view v-if="cartList.length != 0" class="shop-layout">
			<view style="margin: 10px 10px; font-size: 14px;">配送至:</view>
			<view class="address-layout">
				<view class="address-layout-content" v-if="null != address">
					<view style="font-size: 16px; font-weight: bold;">{{address.province}}{{address.city}}{{address.area}}{{address.detail}}</view>
					<view style="font-size: 14px; margin-top: 10px; margin-bottom: 10px;">{{address.name}} {{address.phone}}</view>
				</view>
				<view class="address-layout-content" v-if="null == address">
					<view style="font-size: 16px; color: rgb(120, 120, 120); margin-bottom: 10px;">请选择地址</view>
				</view>
				<text class="address-layout-icon" @click="gotoAddressPage">&#xe470;</text>
			</view>
		</view>
		<view v-if="cartList.length != 0" class="shop-layout">
			<view v-for="(item, index) in cartList">
				<view class="card">
					<image class="card-pic" :src="item.picUrl"></image>
					<view class="card-content">
						<view class="card-content-title">{{item.name}}</view>
						<view class="card-content-count">x {{item.count}}</view>
					</view>
					<view class="card-content-price">¥ {{numFilter(item.price)}}</view>
				</view>
				<view class="line"></view>
			</view>
			<view class="desc-layout">共计{{count}}件商品, 合计: ¥{{numFilter(money)}}</view>
		</view>
		
		<view v-if="cartList.length != 0" class="shop-layout" style="flex-direction: row;" @click="showCoupon">
			<view style="padding-top: 10px; padding-bottom: 10px; margin-left: 10px;">优惠券</view>
			<text v-if="null != deductMoney" class="address-layout-icon">-¥{{numFilter(deductMoney)}} &#xe470;</text>
			<text v-if="null == deductMoney" class="address-layout-icon">&#xe470;</text>
		</view>
		<view style="margin-bottom: 80px;"></view>
		
		<view :class="['popup_content', showCouponModal ? 'openActive': '']">
			<radio-group @change="radioChange">
				<view v-if="couponList.length == 0" style="text-align: center; color: rgb(100, 100, 100); font-size: 16px; margin-top: 20px;">
					无可用优惠券
				</view>
				<view v-for="item in couponList">
					<view class="coupon-layout">
						<view class="coupon-layout-top">
							<image class="coupon-layout-icon" src="/static/weapp/ic_redpacket.png" mode="aspectFit"></image>
							<view class="coupon-layout-center">
								<block v-if="!item.disabled">
									<view style="margin-left: 10px; margin-top: 5px; font-weight: bold;">{{item.name}}</view>
									<view style="margin-left: 10px; margin-bottom: 5px; margin-top: auto; color: red; font-size: 14px;">{{item.expireTime}}到期</view>
								</block>
								<block v-if="item.disabled">
									<view style="margin-left: 10px; margin-top: 5px; color: gainsboro;">{{item.name}}</view>
									<view style="margin-left: 10px; margin-bottom: 5px; margin-top: auto; color: gainsboro; font-size: 14px;">{{item.expireTime}}到期</view>
								</block>
							</view>
							<view class="coupon-layout-right">
								<block v-if="!item.disabled">
									<view style="margin-top: 10px; color: red; font-size: 24px; text-align: center;">¥{{item.money}}</view>
									<view v-if="item.threshold != -1" style="margin-bottom: 5px; margin-top: auto; font-size: 14px;">满{{item.threshold}}可用</view>
									<view v-if="item.threshold == -1" style="margin-bottom: 5px; margin-top: auto; font-size: 14px;">无门槛</view>
								</block>
								<block v-if="item.disabled">
									<view style="margin-top: 10px; color: gainsboro; font-size: 24px; text-align: center;">¥{{item.money}}</view>
									<view v-if="item.threshold != -1" style="margin-bottom: 5px; margin-top: auto; font-size: 14px; color: gainsboro;">满{{item.threshold}}可用</view>
									<view v-if="item.threshold == -1" style="margin-bottom: 5px; margin-top: auto; font-size: 14px; color: gainsboro;">无门槛</view>
								</block>
							</view>
							<view class="radio-layout">
								<radio :value="item.id" :checked="item.id === checkedCouponId" :disabled="item.disabled"/>
							</view>
						</view>
						<view class="coupon-layout-bottom">
							{{item.desc}}
						</view>
					</view>
				</view>
			</radio-group>
		</view>
		<view v-if="showCouponModal" class="popup_overlay" @click="closeCoupon"></view>
		
		<view class="bottom-layout">
			<view class="pay-text">实际支付: ¥{{numFilter(actualMoney)}}</view>
			<view class="pay-button" @click="pay">结算</view>
		</view>
	</view>
</template>

<script>
	import { http } from '@/common/service/service.js'
	import { shopList, getShopCount, getShopTotalMoney } from '../cart/cart.js'
	import { addressList, getSelectedAddress } from '../user/address.js'
	
	export default {
		data() {
			return {
				cartList: shopList,
				count: 0,
				money: 0.0,
				actualMoney: 0.0,
				address: null,
				showCouponModal: false,
				couponList: [],
				checkedCouponId: null,
				deductMoney: null,
			}
		},
		methods: {
			radioChange(evt) {
				this.checkedCouponId = evt.detail.value;
				for (var index in this.couponList) {
					var item = this.couponList[index];
					if (item.id == this.checkedCouponId) {
						this.deductMoney = item.money;
						this.actualMoney = this.money - this.deductMoney;
						this.closeCoupon();
						break;
					}
				}
			},
			
			numFilter(value) {
			    let realVal = parseFloat(value).toFixed(2)
			    return realVal
			},
			
			gotoAddressPage() {
				uni.navigateTo({
					url: '/pages/weapp/user/address-list'
				})
			},
			
			async showCoupon() {
				this.couponList.splice(0);
				var res = await new Promise((resolve, reject) => {
					http.get('/coupon/list?isExpired=false').then(res => {
						resolve(res.data);
					})
				});
				if (res.code == 200) {
					var list = res.data;
					for (var index in list) {
						var item = list[index];
						item.disabled = false;
						if (item.threshold > this.money) {
							item.disabled = true;
							item.desc = '订单金额未达到' + item.threshold;
						} else if (item.used == true) {
							item.disabled = true;
							item.desc = '已使用';
						}
						this.couponList.push(item);
					}
					this.showCouponModal = true;
				}
			},
			
			closeCoupon() {
				this.showCouponModal = false;
			},
			
			clear() {
				this.cartList.splice(0);
				this.count = 0;
				this.money = 0.0;
				this.actualMoney = 0.0;
				this.couponList.splice(0);
				this.checkedCouponId = null;
				this.deductMoney = null;
			},
			
			async pay() {
				if (this.cartList.length == 0) {
					uni.showToast({
						title: '请选择商品',
						icon: 'error'
					})
					return;
				}
				
				if (null == this.address) {
					uni.showToast({
						title: '请选择地址',
						icon: 'error'
					})
					return;
				}
				
				let obj= Object.create(null);
				for (var index in this.cartList) {
					var item = this.cartList[index];
				    obj[item.id] = item.count;
				}
				var json = JSON.stringify(obj);
				
				var res = await new Promise((resolve, reject) => {
					http.post('/order/add', {
						'money': this.money,
						'couponId': this.checkedCouponId,
						'actualMoney': this.actualMoney,
						'addressId': this.address.id,
						'goodsCount': obj
					}).then(res => {
						resolve(res.data);
					})
				});
				
				if (res.code == 200) {
					uni.showToast({
						icon: 'success',
						title: '支付成功'
					})
					this.clear();
				}
			},
			
			checkDeductMoney() {
				this.deductMoney = null;
				if (null != this.checkedCouponId) {
					for (var index in this.couponList) {
						var item = this.couponList[index];
						if (item.id == this.checkedCouponId) {
							if (item.threshold <= this.money) {
								this.deductMoney = item.money;
								this.actualMoney -= this.deductMoney;
							} else {
								this.checkedCouponId = null;
							}
							break;
						}
					}
				}
			}
		},
		onShow() {
			this.count = getShopCount();
			this.money = getShopTotalMoney();
			this.actualMoney = this.money;
			if (this.money > 0) {
				this.checkDeductMoney();
			}
			this.address = getSelectedAddress();
		}
	}
</script>

<style>
	.shop-layout {
		display: flex;
		flex-direction: column;
		background-color: white;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		margin-top: 10px;
		margin-left: 10px;
		margin-right: 10px;
	}
	.icon-layout {
		display: flex;
		width: 100px;
		height: 100px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 20px;
	}
	.empty-content {
		display: flex;
		text-align: center;
		justify-content: center;
		font-size: 16px;
		color: rgb(66, 66, 66);
		padding-bottom: 100px;
	}
	.card {
		display: flex;
		flex-direction: row;
		width: 100%;
		margin: 10px 10px;
	}
	.card-pic {
		display: flex;
		width: 100px;
		height: 100px;
		margin: 10px 10px;
	}
	.card-content {
		display: flex;
		flex-direction: column;
		height: 100px;
		margin: 10px 10px;
		width: 45%;
	}
	.card-content-title {
		font-size: 14px;
		font-weight: bold;
		text-align: left;
	}
	.card-content-count {
		font-size: 14px;
		text-align: left;
		margin-top: auto;
		margin-bottom: 0;
	}
	.card-content-price {
		display: flex;
		font-size: 14px;
		font-weight: bold;
		text-align: center;
		margin-top: auto;
		margin-right: 10px;
		margin-bottom: 10px;
	}
	.line {
		display: flex;
		margin-left: 10px;
		margin-right: 10px;
		height: 1px;
		background-color: gainsboro;
	}
	::-webkit-scrollbar {
	  width: 0;
	  height: 0;
	  background-color: transparent;
	}
	.desc-layout {
		display: flex;
		margin-top: 20px;
		margin-bottom: 20px;
		margin-left: auto;
		margin-right: 10px;
		font-size: 16px;
	}
	.bottom-layout {
		display: flex;
		position: fixed;
		width: 100%;
		height: 50px;
		bottom: 0px;
		background-color: white;
	}
	.pay-button {
		display: flex;
		background-color: orange;
		font-size: 18px;
		padding-top: 5px;
		padding-bottom: 5px;
		color: white;
		width: 30%;
		border-radius: 20px;
		margin-right: 10px;
		margin-left: 10px;
		margin-top: auto;
		margin-bottom: auto;
		justify-content: center;
	}
	.pay-text {
		display: flex;
		font-size: 16px;
		justify-content: center;
		margin-right: 10px;
		margin-left: auto;
		margin-top: auto;
		margin-bottom: auto;
	}
	.address-layout {
		display: flex;
		flex-direction: row;
		width: 100%;
		margin-left: 10px;
		margin-right: 10px;
	}
	.address-layout-content {
		display: flex;
		flex-direction: column;
		width: 90%;
	}
	.address-layout-icon {
		font-family: uniicons;
		font-size: 16px;
		margin-left: auto;
		margin-right: 20px;
		margin-top: auto;
		margin-bottom: auto;
		justify-content: flex-end;
	}
	.popup_overlay {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: rgb(200, 200, 200, 0.5);
		z-index: 1001;
		-moz-opacity: 0.8;
		opacity: .80;
		filter: alpha(opacity=88);
	}
	.popup_content {
		display: flex;
		flex-direction: column;
		position: fixed;
		height: 250px;
		left: 0;
		right: 0;
		bottom: -260px;
		overflow-y: scroll;
		border: 5px solid rgb(250, 250, 250);
		background-color: rgb(250, 250, 250);
		z-index: 1002;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		transition: all 0.25s linear;
	}
	.openActive {
		bottom: 0 !important;
	}
	.coupon-layout {
		display: flex;
		flex-direction: column;
		height: 100px;
		background-color: white;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		margin-top: 10px;
		margin-bottom: 10px;
		margin-left: 10px;
		margin-right: 10px;
		box-shadow: rgb(200, 200, 200) 0px 0px 5px;
	}
	.coupon-layout-top {
		display: flex;
		flex-direction: row;
		height: 70%;
		margin-left: 10px;
		margin-right: 10px;
		border-bottom: 1px dashed #969696;
	}
	.coupon-layout-icon {
		display: flex;
		width: 64px; 
		height: 64px;
		margin-top: auto;
		margin-bottom: auto;
	}
	.coupon-layout-center {
		display: flex;
		flex-direction: column;
		height: 64px;
		margin-top: auto;
		margin-bottom: auto;
	}
	.coupon-layout-right {
		display: flex;
		flex-direction: column;
		width: 80px;
		height: 64px;
		margin-top: auto;
		margin-bottom: auto;
		text-align: center;
	}
	.radio-layout {
		display: flex;
		flex-direction: column;
		width: 10%; 
		height: 100%; 
		justify-content: center; 
		text-align: center;
	}
	.coupon-layout-bottom {
		display: flex;
		flex-direction: row;
		font-size: 14px;
		color: #969696;
		margin-left: 10px;
		margin-top: auto;
		margin-bottom: auto;
	}
</style>